<template>
    <div class="app-container">
        <el-card class="box-card">
            <div class="flex items-center">
                <div class="flex items-center mr-4">
                    <span class="item">相亲动画：</span>
                    <el-input v-model="listQuery.name" clearable placeholder="请输入相亲动画" size="normal"></el-input>
                </div>
                <el-button size="default" type="primary" @click="getTableData">搜索</el-button>
                <!-- <el-button size="default" type="primary" @click="handleReset">重置</el-button> -->
            </div>
            <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                border
                class="mt-3"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
            >
                <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
                <el-table-column label="用户ID" prop="user.user_data.user_code"></el-table-column>
                <el-table-column label="用户昵称" prop="user.user_data.nickname"></el-table-column>
                <el-table-column label="心动值" prop="user.score"></el-table-column>
                <el-table-column label="用户ID" prop="other_user.user_data.user_code"></el-table-column>
                <el-table-column label="用户昵称" prop="other_user.user_data.nickname"></el-table-column>
                <el-table-column label="心动值" prop="other_user.score"></el-table-column>
                <el-table-column label="相亲动画" prop="scene.name"></el-table-column>
                <el-table-column label="配装装扮(男)">
                    <template slot-scope="{row}">
                        <el-image v-if="row.scene.man_reward_detail.picture" :src="row.scene.man_reward_detail.picture" fit="fill" :lazy="true"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="配装装扮(女)">
                    <template slot-scope="{row}">
                        <el-image v-if="row.scene.woman_reward_detail.picture" :src="row.scene.woman_reward_detail.picture" fit="fill" :lazy="true"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="参与房间ID" prop="room.room_id"></el-table-column>
                <el-table-column label="获得时间" prop="created_at"></el-table-column>
                
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)"
                        >查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :limit.sync="listQuery.perPage"
                :page.sync="listQuery.page"
                :total="total"
                @pagination="getTableData"
            />
        </el-card>
  
        <el-dialog
            title="详情"
            :visible.sync="dialogVisible"
            width="30%"
            @close="closeDialog('form')">
            
            <el-form :model="form" ref="form" label-width="120px" :inline="false" size="normal">
                <el-form-item label="头像">
                    <div class="flex items-center justify-around">
                        <el-image :src="form.user.user_data.head_picture" class="picture" fit="fill" :lazy="true"></el-image>
                        <el-image :src="form.other_user.user_data.head_picture" class="picture" fit="fill" :lazy="true"></el-image>
                    </div>
                </el-form-item>
                <el-form-item label="用户名称">
                    <div class="flex items-center justify-around">
                        <p class="text-center">{{ form.user.user_data.nickname }}</p>
                        <p class="text-center">{{ form.other_user.user_data.nickname }}</p>
                    </div>
                </el-form-item>
                <el-form-item label="心动值">
                    <div class="flex items-center justify-around">
                        <p class="text-center">{{ form.user.score }}</p>
                        <p class="text-center">{{ form.other_user.score }}</p>
                    </div>
                </el-form-item>
                <el-form-item label="相亲动画">
                    <p class="text-center">{{ form.scene.name }}</p>
                </el-form-item>
                <el-form-item label="配装装扮">
                    <div class="flex items-center justify-around">
                        <el-image :src="form.scene.man_reward_detail.picture" class="picture" fit="fill" :lazy="true"></el-image>
                        <el-image :src="form.scene.woman_reward_detail.picture" class="picture" fit="fill" :lazy="true"></el-image>
                    </div>
                </el-form-item>
                <el-form-item label="房间ID">
                    <p class="text-center">{{ form.room.room_id }}</p>
                </el-form-item>
            </el-form>
            
            
            <span slot="footer">
                <el-button @click="dialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
    import { datingCoupleList } from '@/api/loverRoom'
  	export default {
        name: 'blindDateRecord',
        data() {
            return {
                dialogTitle: 'add',
                dialogVisible: false,
                loading: false,
                tableData: [],
                listQuery: {
                    page: 1,
                    perPage: 10
                },
                total: 1,
                options: [],
                form: {
                    user: {
                        score: undefined,
                        user_data: {
                            nickname: undefined,
                            head_picture: undefined
                        }
                    },
                    other_user: {
                        score: undefined,
                        user_data: {
                            nickname: undefined,
                            head_picture: undefined
                        }
                    },
                    room_id: undefined,
                    scene: {
                        name: undefined,
                        man_reward_detail: {
                            title: undefined,
                            picture: undefined
                        },
                        woman_reward_detail: {
                            title: undefined,
                            picture: undefined
                        },
                    },
                    room: {
                        room_id: undefined,
                    }
                }
            }
        },
        created() {
            this.getTableData()
        },
        methods: {
            indexMethod(index) {
                return (this.listQuery.page - 1) * this.listQuery.perPage + index + 1
            },
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key] == 0 ? 0 : this.listQuery[key]
                }
                const {data, code} = await datingCoupleList(this.listQuery)
                if (code === 200) {
                    this.tableData = data.list
                    this.total = data.meta.total
                }
                this.loading = false
        
            },
            closeDialog(form) {
                if (this.$refs[form]) {
                    this.$refs[form].clearValidate() // 清除整个表单的校验
                    this.$refs[form].resetFields() // 清除整个表单的校验
                }
                this.form = {
                    user: {
                        score: undefined,
                        user_data: {
                            nickname: undefined,
                            head_picture: undefined
                        }
                    },
                    other_user: {
                        score: undefined,
                        user_data: {
                            nickname: undefined,
                            head_picture: undefined
                        }
                    },
                    room_id: undefined,
                    scene: {
                        name: undefined,
                        man_reward_detail: {
                            title: undefined,
                            picture: undefined
                        },
                        woman_reward_detail: {
                            title: undefined,
                            picture: undefined
                        },
                    },
                    room: {
                        room_id: undefined,
                    }
                }
            },
            handleEdit(row) {
                this.form = JSON.parse(JSON.stringify(row))
                this.dialogVisible = true
            },
        }
    }
</script>
  
<style lang="scss" scoped>
::v-deep{ 
    .hide_box{
        .el-upload--picture-card {
            display: none;
        }
    }
    .el-upload-list__item {
        margin-right: 1em !important;
    }
}
.picture {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.awardBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .awardInfo {
        margin-right: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        width: 148px;
        height: 148px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        .closeIcon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: rgba(0,0,0,.6);
            color: #ffffff;
            overflow: hidden;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            z-index: 0;
        }
    }
    .hide_box:hover {
        .closeIcon {
            opacity: 1;
            z-index: 1;
        }
    }
    .show_box {
        .closeIcon {
            opacity: 0;
            z-index: -1;
        }
    }
}
.item {
    width: 100px;
}
.formItemBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	overflow: hidden;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}
    
}

</style>
  